<!DOCTYPE html >
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script th:src="@{/js/jquery-1.10.2.js}"></script>
    <script th:src="@{/layui/layui.all.js}"></script>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
</head>
<body>
<table id="demo" lay-filter="test"></table>
<script type="text/html" id="mytoolbar">
    <button type="button" class="layui-btn layui-btn-radius" lay-event="saveDept"><i class="layui-icon layui-icon-addition"></i>添加</button>
    <button type="button" class="layui-btn layui-btn-radius layui-btn-danger" lay-event="delDept"><i class="layui-icon layui-icon-delete"></i>删除</button>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn  layui-btn-normal layui-btn-xs" lay-event="edit">修改</a>
</script>


<form class="layui-form" action="" id="deptSaveForm" style="display: none">
    <div class="layui-form-item">
        <label class="layui-form-label">部门名称</label>
        <div class="layui-input-block">
            <input type="text" name="deptName" required  lay-verify="required" placeholder="请输入部门名称" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-block">
            <input type="text" name="status" required  lay-verify="required" placeholder="请输入当前状态" autocomplete="off" class="layui-input">
        </div>
    </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="button"  	class="layui-btn layui-btn-normal" lay-submit lay-filter="saveDeptForm">保存</button>
            <button type="reset"  	class="layui-btn layui-btn-warm">重置</button>
        </div>
    </div>



</form>
<form class="layui-form" action="" id="deptEditForm" style="display: none">
    <input type="hidden" id="deptId" name="deptId">
    <div class="layui-form-item">
        <label class="layui-form-label">部门名</label>
        <div class="layui-input-block">
            <input type="text" id="deptName" name="deptName" required  lay-verify="required" placeholder="请输入角色名" autocomplete="off" class="layui-input">
        </div>
    </div>
        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input type="text" name="status" required  lay-verify="required" placeholder="请输入当前状态" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="button"  	class="layui-btn layui-btn-normal" lay-submit lay-filter="editDeptForm">修改</button>
            <button type="reset"  	class="layui-btn layui-btn-warm">重置</button>
        </div>
    </div>



</form>
</body>
<script>
    var form=layui.form;
    var table=layui.table;
    form.render();//渲染表单
    //第一个实例
    var myTable= table.render({
        elem: '#demo'
        ,height: 350
        ,url: 'showDept' //数据接口
        ,toolbar: '#mytoolbar' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
        ,cols: [
            [ //表头
                {field: 'deptId', title: '部门编号', width:80, sort: true, fixed: 'left',checkbox: true}
                ,{field: 'deptName', title: '部门名称', width:120, sort: true, fixed: 'left'}
                ,{field: 'status', title: '状态', width:100}
                ,{field: 'createBy', title: '创建者', width:100}
                ,{field: 'createTime', title: '创建时间', width:200}
                ,{field: 'updateBy', title: '最近更新', width:100}
                ,{field: 'updateTime', title: '更新时间', width:200}
                ,{ title: '操作', width:200, toolbar: '#barDemo'}
            ]]
    });
    //监听头工具栏事件
    table.on('toolbar(test)', function(obj){
        var checkStatus = table.checkStatus(obj.config.id)
            ,data = checkStatus.data; //获取选中的数据
        var ids=[];
        switch(obj.event){
            case 'saveDept':
                layer.open(
                    {
                        type: 1,
                        content: $("#deptSaveForm"),
                        icon: 1,
                        title:"添加部门",
                        area: ['450px', '300px']
                    }
                )
                break;
            case 'update':
                if(data.length === 0){
                    layer.msg('请选择一行');
                } else if(data.length > 1){
                    layer.msg('只能同时编辑一个');
                } else {
                    layer.alert('编辑 [id]：'+ checkStatus.data[0].id);
                }
                break;
            case 'delDept':
                if(data.length === 0){
                    layer.msg('请选择一行');
                } else {
                    console.log(data)
                    layer.confirm('确定要删除吗?', function(index){
                        //获取所有需要删除的deptid，保存在ids的数组中
                        for(var i=0;i<data.length;i++){
                            ids.push(data[i].deptId);
                        }
                        $.ajax({
                            url: 'delDept',//地址
                            dataType: 'json',//数据类型
                            type: 'POST',//类型
                            data:{ids:JSON.stringify(ids)},//将数组ids转换成json字符串
                            //请求成功
                            success: function (result) {
                                if(result.code==0){
                                    //关闭弹出层
                                    layer.close(index);
                                    //显示删除成功消息
                                    layer.msg(result.message,{icon:1})
                                    //重新加载数据表格
                                    myTable.reload();
                                }else
                                {
                                    //关闭弹出层
                                    layer.close(index);
                                    layer.msg(result.message,{icon:5})
                                }
                            }
                        });

                    });
                }
                break;
        };
    });
    //监听提交
    form.on('submit(saveDeptForm)', function(data){
        //数据的提交，ajax方式
        console.log(data.field)
        $.ajax({
            url: 'saveDept',//地址
            dataType: 'json',//数据类型
            type: 'POST',//类型
            data:data.field,
            //请求成功
            success: function (result) {
                console.log(result);
                if(result.code==0){
                    //关闭弹出层
                    layer.closeAll();
                    //显示添加成功消息
                    layer.msg(result.message,{icon:1})
                    //重新加载数据表格
                    myTable.reload();
                }else
                {
                    //关闭弹出层
                    layer.closeAll();
                    layer.msg(result.message,{icon:5})
                }
            }
        });
        return false;
    });
    form.on('submit(editDeptForm)', function(data){
        //数据的提交，ajax方式
        console.log(data.field)
        $.ajax({
            url: 'editDept',//地址
            dataType: 'json',//数据类型
            type: 'POST',//类型
            data:data.field,
            //请求成功
            success: function (result) {
                if(result.code==0){
                    //关闭弹出层
                    layer.closeAll();
                    //显示添加成功消息
                    layer.msg(result.message,{icon:1})
                    //重新加载数据表格
                    myTable.reload();
                }else
                {
                    //关闭弹出层
                    layer.closeAll();
                    layer.msg(result.message,{icon:5})
                }
            }
        });
        return false;
    });
    //监听行工具事件
    table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        var data = obj.data //获得当前行数据
            ,layEvent = obj.event; //获得 lay-event 对应的值
        if(layEvent === 'detail'){
            layer.msg('查看操作');
        } else if(layEvent === 'del'){
            layer.confirm('真的删除行么', function(index){
                obj.del(); //删除对应行（tr）的DOM结构
                layer.close(index);
                //向服务端发送删除指令
            });
        } else if(layEvent === 'edit'){
            layer.msg('编辑操作');
            //填充修改用户的表单项
            console.log(data);
            $("#deptId").val(data.deptId);
            $("#deptName").val(data.deptName);
            $("#orderNum").val(data.orderNum);
            $("#status").val(data.status);
            layer.open(
                {
                    type: 1,
                    content: $("#deptEditForm"),
                    icon: 1,
                    title:"修改部门",
                    area: ['450px', '300px']
                }
            )
        }
    });

</script>
</html>

